<!DOCTYPE html>
<html lang="en">
<head>
    <title>后台管理</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="favicon.ico">

    <!-- FontAwesome JS-->
    <script defer src="assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="assets/css/portal.css">
    <!--使用CDN方式引入jQuery类库-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

    <style>
        .user-profile-menu {
            display: none;
        }

        .user-profile-menu-active {
            display: block;
            position: fixed;
            width: 160px;
            height: auto;
            top: 73px;
            right: 10px;
            z-index: 1000;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #FEFEFE;
            text-align: center;
        }
    </style>

</head>

<body class="app">


<!--后台管理顶部导航和左侧菜单栏部分开始-->
<header class="app-header fixed-top">
    <iframe src="header_inner.html" name="headerFrame" style="width:100%; height: 72px;" wmode="transparent" frameborder="0"
            allowfullscreen></iframe>
    <div id="app-sidepanel" class="app-sidepanel">
        <div id="sidepanel-drop" class="sidepanel-drop"></div>
        <div class="sidepanel-inner d-flex flex-column">
            <a href="#" id="sidepanel-close" class="sidepanel-close d-xl-none">&times;</a>
            <div class="app-branding">
                <a class="app-logo" href="index.html"><span class="logo-text">白嫖电影后台管理</span></a>

            </div><!--//app-branding-->
            <!--左侧的菜单栏开始-->
            <nav id="app-nav-main" class="app-nav app-nav-main flex-grow-1">
                <ul class="app-menu list-unstyled accordion" id="menu-accordion">

                    <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="index.html">
						        <span class="nav-icon">
						        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-house-door"
                                     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
		  <path fill-rule="evenodd"
                d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
		  <path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
		</svg>
						         </span>
                            <span class="nav-link-text">网站设置</span>
                        </a><!--//nav-link-->
                    </li><!--//网站统计-->

                    <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="javascript:void(0);" onclick="goToLink('users.manage','movie-users.html')">
						        <span class="nav-icon">

						         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                      class="bi bi-people" viewBox="0 0 16 16">
  <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
</svg>

						         </span>
                            <span class="nav-link-text">用户管理</span>
                        </a><!--//nav-link-->
                    </li><!--//用户管理-->
                    <li class="nav-item active has-submenu">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link active submenu-toggle" href="#" data-bs-toggle="collapse"
                           data-bs-target="#submenu-1" aria-expanded="false" aria-controls="submenu-1">
						        <span class="nav-icon">
						        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
						        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-film" viewBox="0 0 16 16">
  <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
</svg>
						         </span>
                            <span class="nav-link-text">影片管理</span>
                            <span class="submenu-arrow">
		                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                          class="bi bi-chevron-up" viewBox="0 0 16 16">
  <path fill-rule="evenodd"
        d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>
	                             </span><!--//submenu-arrow-->
                        </a><!--//nav-link-->
                        <div id="submenu-1" class="submenu submenu-1" data-bs-parent="#menu-accordion">
                            <ul class="submenu-list list-unstyled">
                                <li class="submenu-item"><a class="submenu-link" href="javascript:void(0);" onclick="goToLink('movie.query','movie-list.html')">影片列表</a>
                                </li>
                                <li class="submenu-item"><a class="submenu-link" href="javascript:void(0);" onclick="goToLink('movie.save','movie-post.html')">新增影片</a>
                                </li>
                            </ul>
                        </div>
                    </li><!--//影片管理-->

                    <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="charts.html">
						        <span class="nav-icon">
						        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bar-chart-line"
                                     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
	  <path fill-rule="evenodd"
            d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/>
	</svg>
						         </span>
                            <span class="nav-link-text">影片统计</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->
                    <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="javascript:void(0);">
						        <span class="nav-icon">
						        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle"
                                     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
</svg>
						         </span>
                            <span class="nav-link-text">帮助</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->
                </ul><!--//app-menu-->
            </nav><!--//app-nav-->
            <!--左侧的菜单栏结束-->

        </div><!--//sidepanel-inner-->
    </div><!--//app-sidepanel-->
</header><!--//app-header-->
<!--后台管理顶部导航和左侧菜单栏部分结束-->

<div class="app-wrapper">

    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <h1 class="app-page-title">新增电影</h1>

            <hr class="mb-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-2">
                    <h3 class="section-title">基本信息</h3>
                    <div class="section-intro">这里请设置新增影片的基本信息.<br><a href="#">了解更多</a></div>
                </div>
                <div class="col-12 col-md-10">
                    <div class="app-card app-card-settings shadow-sm p-4">

                        <div class="app-card-body">
                            <form class="settings-form" id="postMovieForm">
                                <div class="mb-3">
                                    <label for="setting-input-1" class="form-label">片名</label>
                                    <input type="text" class="form-control" id="setting-input-1"
                                           value="" name="name" placeholder="请输入影片名称" required>
                                </div>
                                <div class="mb-3">
                                    <label for="setting-input-2" class="form-label">导演</label>
                                    <input type="text" class="form-control" style="width: 280px" id="setting-input-2"
                                           value="" name="director"
                                           placeholder="请输入导演姓名" required>
                                </div>
                                <div class="mb-3">
                                    <label for="setting-input-2" class="form-label">年份</label>
                                    <input type="date" class="form-control" style="width: 280px" id="setting-input-4"
                                           name="playDate" value=""
                                    >
                                </div>
                                <div class="mb-3">
                                    <label for="movie-type" class="form-label">类型</label>
                                    <select id="movie-type" name="type" class="form-select w-auto">
                                        <!--
                                        <option value="喜剧">喜剧</option>
                                        <option value="爱情">爱情</option>
                                        <option value="犯罪">犯罪</option>
                                        <option value="惊悚">惊悚</option>
                                        <option value="动作">动作</option>
                                        <option value="科幻">科幻</option>
                                        <option value="动画">动画</option>
                                        <option value="记录">记录</option>
                                        <option value="MV">MV</option>
                                        -->
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">标签</label>
                                    <div style="padding: 10px;">
                                        <input class="form-check-input" type="checkbox" name="tags"
                                               value="经典">经典
                                        <input class="form-check-input" type="checkbox" name="tags"
                                               value="烂片">烂片
                                        <input class="form-check-input" type="checkbox" name="tags"
                                               value="无厘头">无厘头
                                        <input class="form-check-input" type="checkbox" name="tags"
                                               value="贺岁档">贺岁档
                                        <input class="form-check-input" type="checkbox" name="tags"
                                               value="金庸武侠">金庸武侠
                                        <input class="form-check-input" type="checkbox" name="tags"
                                               value="黑色幽默">黑色幽默
                                        <input class="form-check-input" type="checkbox" name="tags"
                                               value="玄幻">玄幻
                                        <input class="form-check-input" type="checkbox" name="tags"
                                               value="中国元素">中国元素
                                        <input class="form-check-input" type="checkbox" name="tags"
                                               value="西部">西部
                                        <input class="form-check-input" type="checkbox" name="tags"
                                               value="青春">青春
                                        <input type="text" id="user-defined-tags" value="" placeholder="自定义"/>(多个标签请使用空格分割)
                                    </div>

                                </div>
                                <div class="mb-3">
                                    <label for="movie-duration" class="form-label">时长</label>
                                    <div>
                                        <input type="number"
                                               class="form-control"
                                               style="width: 180px"
                                               oninput="if(value>600){value=600}else if(value<0){value = 0}else{value=value.replace(/[^\d]/g,'')}if(value.indexOf(0)==0){value=1}"
                                               id="movie-duration" value=""
                                               name="duration"
                                               placeholder="请输入电影时长" required>
                                    </div>

                                </div>
                                <div class="mb-3">
                                    <label for="movieLogoFile" class="form-label">上传海报</label>
                                    <div style="display:flex;">
                                        <input class="form-control" style="width: 400px"  name="file" type="file"
                                               id="movieLogoFile">
                                        <input type="hidden" name="logo" id="movie-logo" value=""/>
                                        <input type="button" style="width: 80px;margin-left: 20px"
                                               class="btn app-btn-secondary" onclick="uploadMovieLogo()" value="上传"/>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="movie-introduce" class="form-label">简介</label>
                                    <div>
                                        <textarea id="movie-introduce" name="introduce" cols="100" rows="4"
                                                  placeholder="请输入电影简介" required></textarea>
                                    </div>

                                </div>
                                <div class="mb-3">
                                    <label for="movie-url" class="form-label">播放地址</label>
                                    <input type="text" class="form-control" style="width: 480px" id="movie-url"
                                           value="" name="url"
                                           placeholder="请输入电影播放地址" required>
                                </div>
                                <button type="button" onclick="doSaveMovie()" class="btn app-btn-primary">保存</button>
                            </form>
                        </div><!--//app-card-body-->

                    </div><!--//app-card-->
                </div>
            </div><!--//row-->

            <hr class="my-4">

            <div class="row g-4 settings-section">
                <div class="col-12 col-md-2">
                    <h3 class="section-title">推广宣传</h3>
                    <div class="section-intro">这里设置电影的推广宣传计划<br><a href="#">了解更多</a></div>
                </div>
                <div class="col-12 col-md-10">
                    <div class="app-card app-card-settings shadow-sm p-4">

                        <div class="app-card-body">
                            <div class="mb-2"><strong>是否置顶</strong></div>

                            <div class="row justify-content-lg-start">
                                <input class="form-check-input" type="checkbox" role="switch"
                                       id="flexSwitchCheckDefault"/>&nbsp;&nbsp;置顶

                            </div>

                        </div><!--//app-card-body-->

                    </div><!--//app-card-->
                </div>
            </div><!--//row-->
            <hr class="my-4">

        </div><!--//container-fluid-->
    </div><!--//app-content-->

    <footer class="app-footer">
        <div class="container text-center py-3">
            <small class="copyright"> <span class="sr-only">love</span><i class="fas fa-heart"
                                                                          style="color: #fb866a;"></i> 作者：西蒙牛 <a
                    class="app-link" target="_blank" href="../index.html" title="网页模板">返回网站首页</a> </small>
        </div>
    </footer><!--//app-footer-->

    <!--保存电影成功之后显示模态窗口-->
    <div class="modal faq-accordion" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel" style="color:#0f9d58">提示信息</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <span id="my-model-title"></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" data-bs-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>
    <!--保存电影成功之后显示模态窗口结束-->

</div><!--//app-wrapper-->

<!--显示用户菜单的DIV-->
<div id="userProfileMenu" class="user-profile-menu">
    <ul style="list-style: none;margin: 16px 0px;">
        <li style="padding: 10px;width: 100%;  margin-left: -10px;" id="currentLoginUserId">用户资料</li>
        <li style="padding: 10px;width: 100%;  margin-left: -10px;"><a href="javascript:void(0);" onclick="javascript:window.frames['headerFrame'].logout()">注销</a></li>
    </ul>
</div>
<!--显示用户菜单的DIV结束-->

<!-- Javascript -->
<script src="assets/plugins/popper.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- Page Specific JS -->
<script src="assets/js/app.js"></script>
<script src="js/util/outils.min.js"></script>
<script src="js/api/baseUrl.js"></script>
<script src="js/api/movie_type.js"></script>
<script src="js/api/movie.js"></script>

<script src="js/util/myutil.js"></script>

<script>

    let movieTypesList=[];
    window.onload = initMovieTypeList();


    if(localStorage.getItem("currentAdminUserInfo")){
        let permissionList = JSON.parse(localStorage.getItem("currentAdminUserInfo")).permissions;
        if(permissionList.indexOf('movie.save') === -1){
            //说明当前登录的用户没有新增电影的权限.
            window.location.href = 'index.html'
        }


        $("#currentLoginUserId").text(JSON.parse(localStorage.getItem("currentAdminUserInfo")).mobile);
    }


    //初始化电影类别的方法
    function initMovieTypeList(){
        queryAllMovieType().then(resp=>{
            if(resp.code === 200){
                movieTypesList = resp.data;
                refreshMovieTypeList();
            }
        })
    }

    //重绘电影类型下拉框的方法
    function refreshMovieTypeList(){
        $("#movie-type").empty();
        let html = '';
        for(let i=0;i<movieTypesList.length;i++){
            let t = movieTypesList[i];
            html += `<option value="${t.type}">${t.type}</option>`;
        }

        $("#movie-type").append(html);

        //refreshMovieList(currentActiveMovieType,'',1); //重绘电影列表
    }



    function doSaveMovie() {

        console.log("执行新增电影.....")

        let movie = getFormData("postMovieForm")
        movie.movieTagsList = [];

        console.log("------该电影的标签是---------")
        $("#postMovieForm input[name='tags']").each(function (i, e) {
            //判断这个元素是不是打钩了。
            if ($(e).prop("checked")) {
                console.log($(e).val())
                movie.movieTagsList.push($(e).val())
            }
        })
        //判断一下用户是否添加了自定义的标签；
        let temp = $("#user-defined-tags").val().trim();  //取出值后去重头尾的空格
        let arr = temp.split(" ");
        //著名的ES的展开语法
        movie.movieTagsList = [...movie.movieTagsList, ... arr];


        //保存电影之前，一定观察电影的所有属性是否都能正常获取。
        console.log(movie);

        //保存之前，需要把电影介绍中的/n转义字符转换为html的<br>标签
        //movie.introduce.replace(/\n/g,'<br/>')
        //console.log("----------------------")
        //console.log(movie.introduce)
        //下面是保存电影的前端接口

        saveMovie(movie).then(resp => {
            $("#exampleModal").modal("show"); //显示模态窗口
            $("#my-model-title").text(resp.msg);

            //把表单重置一下。
            $("#postMovieForm").get(0).reset();
        })
    }

    function uploadMovieLogo() {
        let fd = new FormData();
        fd.append("file", document.getElementById("movieLogoFile").files[0]);
        console.log("-------文件上传时的令牌------")
        console.log(tokenValue);
        $.ajax({
            url: "http://192.168.5.23:8081/movie-admin/qiniu/upload",
            type: "POST",
            beforeSend: function (xhr) {
                //请求头部，添加会员卡的名字和会员卡的卡号。
                xhr.setRequestHeader('satoken', tokenValue);
            },
            data: fd,
            //注意：以下两个参数contentType和processData都必须设置为false;
            contentType: false,
            processData: false,
            dataType: "json",
            success: function (res) {
                console.log(res);
                if (res.code === 200) {
                    console.log("上传成功后的图片URL地址");
                    console.log(res.data);
                    //newMovie.logo = res.data;
                    //上传成功后的的图片地址保存到表单一个隐藏域里。
                    $("#movie-logo").val(res.data);
                    $("#exampleModal").modal("show"); //显示模态窗口
                    $("#my-model-title").text("上传图片成功！");
                } else {
                    console.log(res.msg);
                }
            },
            error: err => {
                console.log(err);
            }
        })
    }

    function goToLink(permission, target) {
        //从localStorage获取当前登录用户的权限集合；
        let currentLoginUserPermissions = JSON.parse(localStorage.getItem("currentAdminUserInfo")).permissions;
        console.log("--------------当前登录用户的权限集合是-------------")
        console.log(currentLoginUserPermissions);

        //console.log('------准备页面跳转-------');
        if (currentLoginUserPermissions.indexOf(permission) === -1) {
            //说明当前登录用户没有该权限。
            $("#exampleModal").modal("show"); //显示模态窗口
            $("#my-model-title").text('当前用户无权限！');
            return;
        }
        //console.log('准备跳转到：' + target);
        window.location.href= target;
    }

</script>

<script>

    let userProfileMenuShow = false;

    function showUsersProfileMenu() {
        console.log('父窗口的显示用户菜单....')
        userProfileMenuShow = !userProfileMenuShow;
        if (userProfileMenuShow) {
            $("#userProfileMenu").addClass("user-profile-menu-active"); //显示模态窗口
        } else {
            $("#userProfileMenu").removeClass("user-profile-menu-active"); //隐藏窗口
        }
    }
</script>

</body>
</html> 

